<template>
	<view class="userLayout pageBg">
		<view class="userInfo" :style="{ 'margin-top': statusBarHeight + 'px' }">
			<image class="avatar" src="/common/avatar.jpg" mode="aspectFill"></image>
			<view class="ip">192.168.200.130</view>
			<view class="address">来自: 中国</view>
		</view>
		<view class="section">
			<view class="row">
				<view class="left">
					<uni-icons type="download-filled" size="20" color="#28b389"></uni-icons>
					<text class="text">我的下载</text>
				</view>
				<view class="right">
					<text class="text">33</text>
					<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				</view>
			</view>
			<view class="row">
				<view class="left">
					<uni-icons type="star-filled" size="20" color="#28b389"></uni-icons>
					<text class="text">我的评分</text>
				</view>
				<view class="right">
					<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				</view>
			</view>
			<view class="row">
				<view class="left">
					<uni-icons type="chatboxes-filled" size="20" color="#28b389"></uni-icons>
					<text class="text">联系客服</text>
				</view>
				<view class="right">
					<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				</view>
				<!-- 条件编译 -->
				<!-- #ifdef MP -->
				<button open-type="contact">联系客服</button>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<button @click="clickContact">拨打电话</button>
				<!-- #endif -->
			</view>
		</view>
		<view class="section">
			<view class="row">
				<view class="left">
					<uni-icons type="notification-filled" size="20" color="#28b389"></uni-icons>
					<text class="text">我的下载</text>
				</view>
				<view class="right">
					<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				</view>
			</view>
			<view class="row">
				<view class="left">
					<uni-icons type="flag-filled" size="20" color="#28b389"></uni-icons>
					<text class="text">常见问题</text>
				</view>
				<view class="right">
					<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getStatusBarHeight,
	} from '@/utils/system.js'
	const statusBarHeight = getStatusBarHeight()
	
	// 调用打电话函数
	const clickContact = () =>{
		uni.makePhoneCall({
			phoneNumber: "114"
		})
	}

</script>

<style lang="scss" scoped>
	.userLayout {
		.userInfo {
			padding: 50rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

			.ip {
				font-size: 44rpx;
				color: #333;
				padding: 20rpx 0 5rpx;
			}

			.address {
				font-size: 28rpx;
				color: #aaa;
			}
		}

		.section {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin: 30rpx 30rpx;
			overflow: hidden;
			border-radius: 20rpx;
			box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05);
			border: 1px solid #eee;
			.row {
				position: relative;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #e8e8e8bd;
				background-color: white;
				&:last-child{
					border: none
				}
				.left{
					display: flex;
					align-items: center;
					.text{
						margin-left: 10rpx;
						color: #666;
					}
				}
				.right{
					display: flex;
					align-items: center;
					.text{
						font-size: 28rpx;
						color: #aaa;
					}
				}
				button {
					position: absolute;
					top: 0px;
					left: 0px;
					opacity: 0;
					height: 100%;
					width: 100%;
				}
			}
		}
	}
</style>